<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
  <title>乐优商城--微信支付页</title>
  <link rel="icon" href="/assets/img/favicon.ico">


  <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
  <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css"/>
</head>

<body>

<!--页面顶部白条条，由js动态加载-->
<div id="payVm">
  <div class="top">
    <shortcut/>
  </div>

  <div class="cart py-container">
    <!--logoArea-->
    <div class="logoArea">
      <div class="fl logo">
        <span class="title">收银台</span>
      </div>
    </div>
    <!--主内容-->

    <a href="payfail.html">支付失败演示页</a>
    <a href="paysuccess.html">支付成功演示页</a>


    <div class="checkout py-container  pay">
      <div class="checkout-tit">
        <h4 class="fl tit-txt">
          <span class="success-icon"></span>
          <span class="success-info">订单提交成功，请您及时付款！订单号：{{order.orderId}}</span>
        </h4>
        <span class="fr">
						<em class="sui-lead">应付金额：</em>
						<em class="orange money">￥{{ly.formatPrice(order.actualFee)}}</em>元</span>
        <div class="clearfix"></div>
      </div>
      <div class="checkout-steps">
        <div class="fl weixin">微信支付</div>
        <div class="fl sao">

          <div class="fl code">
            <div id="qrImage"></div>
            <div class="saosao">
              <p>请使用微信扫一扫</p>
              <p>扫描二维码支付</p>
            </div>
          </div>
          <div class="fl phone">

          </div>

        </div>
        <div class="clearfix"></div>
        <p>
          <a href="pay.html" target="_blank">> 其他支付方式</a>
        </p>
      </div>
    </div>

  </div>
</div>


<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/qrcode.min.js"></script>
<script>
  var payVm = new Vue({
    el: "#payVm",
    data() {
      return {
        ly,
        order: {}
      }
    },
    created() {

      ly.http.get("/auth/verify").then(() => {
        // 获取订单id
        const id = ly.getUrlParam("id");
        // 查询付款金额
        ly.http.get("/order/" + id).then(resp => {
          this.order = resp.data;
          this.order.orderId = id;
          // 判断订单状态
          if (this.order.status !== 1) {
            alert("订单已支付！");
            location.href = "/paysuccess.html?orderId=" + id;
          }
          // 生成付款链接
          ly.http.get("/order/url/" + id).then(resp => {
            new QRCode(document.getElementById("qrImage"), {
              text: resp.data,
              width: 250,
              height: 250,
              colorDark: "yellowgreen",
              colorLight: "#ffffff",
              correctLevel: QRCode.CorrectLevel.H
            });
            // 开启定时任务，查询付款状态: 3秒中刷新一下支付的状态
            const taskId = setInterval(() => {
              ly.http.get("/order/state/" + id)
                .then(resp => {
                  let i = resp.data;
                  if (i !== 1) {
                    // 付款成功
                    clearInterval(taskId);
                    // 跳转到付款成功页
                    location.href = "/paysuccess.html?orderId=" + id;
                  }
                }).catch((e) => {
                alert("支付状态查询失败，请刷新页面重试。");
                clearInterval(taskId);
              })
            }, 3000);
            // 同时设置一个定时任务，10分钟后，终止查询，认为付款失败
            setTimeout(() => {
              clearInterval(taskId);
              location.href = "/payfail.html?orderId=" + id;
            }, 600000)
          });
        })

      }).catch(() => {
        window.location.href = "/login.html?returnUrl=" + window.location.href;
      })
    },
    components: {
      shortcut: () => import("./js/pages/shortcut.js")
    }
  });
</script>


<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript">
  $(function () {
    $("ul.payType li").click(function () {
      $(this).css("border", "2px solid #E4393C").siblings().css("border-color", "#ddd");
    })
  })
</script>
</body>

</html>